<template>
  <div class="hello">
    <div class="titleTotal">
      <div class="grid">
        <p @click="addCustom">
          <img src="../../assets/header.png" alt="" />
          <span>添加客户</span>
        </p>
        <p style="margin-top: 30px" @click="queryCus">
          <img src="../../assets/search.png" alt="" />
          <span>查询客户</span>
        </p>
      </div>
      <div class="dataDisplay" v-if="parArray.indexOf('wdsjbb') != -1">
        <div class="header">
          <p>
            <span>数据看板</span>
          </p>
          <div class="top_right">
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="orgNameTop"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
            <el-date-picker
              v-model="value4"
              type="daterange"
              :picker-options="pickerOptions2"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button type="primary" size="mini" @click="refleshTop"
              >刷新</el-button
            >
          </div>
        </div>
        <div class="colDate">
          <div class="col">
            <p>下单总金额</p>

            <div v-if="myData.totalMoney">
              <count-to
                :start-val="0"
                :end-val="Number(myData.totalMoney)"
                :duration="2600"
                class="card-panel-num"
              />
            </div>
            <div v-else>{{ myData.totalMoney }}</div>
            <div class="contrast">
              <span>较昨日</span>
              <img
                v-if="Number(myData.totalMoneyGrowthRate) > 0"
                src="../../assets/ss.png"
                alt=""
              />
              <img v-else src="../../assets/xj.png" alt="" />
              <span v-if="myData.totalMoneyGrowthRate">{{
                myData.totalMoneyGrowthRate.replace(/[&\|\\\*^%$#@\-]/g, "") +
                "%"
              }}</span>
            </div>
          </div>

          <div class="col">
            <p>下单订单总数</p>

            <div v-if="myData.successOrderTotal">
              <count-to
                :start-val="0"
                :end-val="Number(myData.successOrderTotal)"
                :duration="2600"
                class="card-panel-num"
              />
            </div>
            <div v-else>{{ myData.successOrderTotal }}</div>
            <div class="contrast">
              <span>较昨日</span>
              <img
                v-if="Number(myData.successOrderTotalGrowthRate) > 0"
                src="../../assets/ss.png"
                alt=""
              />
              <img v-else src="../../assets/xj.png" alt="" />
              <span v-if="myData.successOrderTotalGrowthRate">{{
                myData.successOrderTotalGrowthRate.replace(
                  /[&\|\\\*^%$#@\-]/g,
                  ""
                ) + "%"
              }}</span>
            </div>
          </div>

          <div class="col">
            <p>代收总金额</p>

            <div v-if="myData.pendingTotalMoney">
              <count-to
                :start-val="0"
                :end-val="Number(myData.pendingTotalMoney)"
                :duration="2600"
                class="card-panel-num"
              />
            </div>
            <div v-else>{{ myData.pendingTotalMoney }}</div>
            <div class="contrast">
              <span>较昨日</span>
              <img
                v-if="Number(myData.pendingTotalMoneyGrowthRate) > 0"
                src="../../assets/ss.png"
                alt=""
              />
              <img v-else src="../../assets/xj.png" alt="" />
              <span v-if="myData.pendingTotalMoneyGrowthRate">{{
                myData.pendingTotalMoneyGrowthRate.replace(
                  /[&\|\\\*^%$#@\-]/g,
                  ""
                ) + "%"
              }}</span>
            </div>
          </div>

          <div class="col">
            <p>代收订单总数</p>

            <div v-if="myData.pendingTotalOrderNumber">
              <count-to
                :start-val="0"
                :end-val="Number(myData.pendingTotalOrderNumber)"
                :duration="2600"
                class="card-panel-num"
              />
            </div>
            <div v-else>{{ myData.pendingTotalOrderNumber }}</div>
            <div class="contrast">
              <span>较昨日</span>
              <img
                v-if="Number(myData.pendingTotalOrderNumberGrowthRate) > 0"
                src="../../assets/ss.png"
                alt=""
              />
              <img v-else src="../../assets/xj.png" alt="" />
              <span v-if="myData.pendingTotalOrderNumberGrowthRate">{{
                myData.pendingTotalOrderNumberGrowthRate.replace(
                  /[&\|\\\*^%$#@\-]/g,
                  ""
                ) + "%"
              }}</span>
            </div>
          </div>
          <div class="col">
            <p>占比</p>

            <div v-if="myData.totalMoneyPercentage">
              <count-to
                :start-val="0"
                :end-val="Number(myData.totalMoneyPercentage)"
                :duration="2600"
                class="card-panel-num"
              />
            </div>
            <div v-else>{{ myData.totalMoneyPercentage }}</div>
            <div class="contrast">
              <span>较昨日</span>
              <img
                v-if="Number(myData.totalMoneyPercentageGrowthRate) > 0"
                src="../../assets/ss.png"
                alt=""
              />
              <img v-else src="../../assets/xj.png" alt="" />
              <span v-if="myData.totalMoneyPercentageGrowthRate">{{
                myData.totalMoneyPercentageGrowthRate.replace(
                  /[&\|\\\*^%$#@\-]/g,
                  ""
                ) + "%"
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dataTeamplete">
      <div>
        <div class="header">
          <p>
            <span>销售榜单</span>
          </p>
          <div class="top_right">
            <!-- 多选树状下拉框 -->
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="rinkForm.colony"
                search-nested
                :normalizer="normalizer"
                :multiple="true"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
            <!-- 多选树状下拉框 -->
            <div class="picker_select">
              <el-select
                v-model="rinkForm.salasType"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="items in statistic"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </div>
            <el-date-picker
              v-model="rinkForm.time"
              type="daterange"
              :picker-options="pickerOptions2"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button type="primary" size="mini" @click="refleshSalas"
              >刷新</el-button
            >
          </div>
        </div>
        <!-- t图标 -->
        <div class="graphical">
          <!-- 部门整体销售 -->
          <div class="group">
            <div class="groupTitle">
              <div class="checked">
                <el-radio-group v-model="checkedTu" @change="changTu">
                  <el-radio :label="1">折线图</el-radio>
                  <el-radio :label="2">柱状图</el-radio>
                </el-radio-group>

                <el-radio-group
                  v-if="checkedTu != 2"
                  v-model="checked"
                  @change="dayMothon"
                >
                  <el-radio :label="1">按天展示</el-radio>
                  <el-radio :label="2">按月展示</el-radio>
                </el-radio-group>
              </div>
              <p @click="teamEvent()">
                <span>查看详情 ></span>
              </p>
            </div>
            <div class="echart1">
              <div
                v-show="checkedTu == '1'"
                id="bumen"
                style="width: 100%; height: 300px"
              ></div>
              <div
                v-show="checkedTu == '2'"
                id="bumenZZ"
                style="width: 100%; height: 300px"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 员工排名列表-->
      <div class="group" style="width: 25%">
        <div class="groupTitle">
          <p>员工排行榜</p>
          <p @click="employeeRankingClick">
            <span>查看更多 ></span>
          </p>
        </div>
        <ul class="ol" style="min-width: 200px">
          <li v-for="(items, index) in employeeData" :key="index">
            <p>
              <span>{{ index + 1 }}</span
              >{{ items.label }}
            </p>
            <span>{{ items.value }}</span>
          </li>
        </ul>
      </div>
      <!-- 员工排名列表-->
    </div>

    <div class="basicInfo">
      <div class="header">
        <p>
          <span>用户画像</span>
        </p>
        <div class="top_right">
          <div class="selectTree">
            <treeselect
              :options="options"
              v-model="userPortraitSearch.orgCode"
              search-nested
              :normalizer="normalizer"
              noResultsText="未找到"
              placeholder="请选择"
            >
            </treeselect>
          </div>
          <!-- 多选树状下拉框 -->
          <div class="picker_select">
            <el-select
              v-model="userPortraitSearch.type"
              clearable
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="items in statistic"
                :key="items.dictId"
                :label="items.dictName"
                :value="items.dictId"
              ></el-option>
            </el-select>
          </div>
          <el-date-picker
            v-model="userPortraitSearch.time"
            type="daterange"
            :picker-options="pickerOptions2"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            format="yyyy- MM- dd"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
          <el-button type="primary" size="mini" @click="refleshUser"
            >刷新</el-button
          >
        </div>
      </div>

      <ul class="baseInformation">
        <li class="float-left" v-if="parArray.indexOf('khdqbb') != -1">
          <div class="group1" v-show="huaxiang">
            <div class="groupTitle">
              <p>地域</p>
              <p style="margin-right: 10px" @click="mapEvent()">
                <span>查看更多 ></span>
              </p>
            </div>
            <div class="echartline">
              <div id="chartLineBox" style="width: 100%; height: 200px"></div>
            </div>
          </div>
        </li>
        <li class="float-left" v-if="parArray.indexOf('khrxfsbb') != -1">
          <div class="group1" v-show="linedata">
            <div class="groupTitle">
              <p>入线方式</p>
              <p style="margin-right: 10px" @click="lineEvent()">
                <span>查看更多 > </span>
              </p>
            </div>
            <div class="echartline">
              <div id="Incoming" style="width: 100%; height: 200px"></div>
            </div>
          </div>
        </li>
        <li class="float-left" v-if="parArray.indexOf('khnlbb') != -1">
          <div class="group1" v-show="ageData">
            <div class="groupTitle">
              <p>年龄</p>
              <p style="margin-right: 10px" @click="agoEvent()">
                <span>查看更多 ></span>
              </p>
            </div>
            <div class="echartline">
              <div id="agesEcharts" style="width: 100%; height: 200px"></div>
            </div>
          </div>
        </li>
        <li class="float-left" v-if="parArray.indexOf('khxbbb') != -1">
          <div class="group1" v-show="sexData">
            <div class="groupTitle">
              <p>性别</p>
              <p @click="sexEvent()">
                <span>查看更多 ></span>
              </p>
            </div>
            <div class="echartline">
              <div id="genderEcharts" style="width: 100%; height: 200px"></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 员工排名弹框 -->
    <div class="dialogEmployeePopUp">
      <el-dialog :visible.sync="employeePopUp" :append-to-body="true" title="">
        <div class="dialog">
          <div class="header dialogNav">
            <p>
              <span style="font-size: 15px">员工排行榜</span>
            </p>
            <div class="top_right">
              <!-- 多选树状下拉框 -->
              <div class="selectTree">
                <treeselect
                  :options="options"
                  v-model="employeeForm.colony"
                  searchable
                  :normalizer="normalizer"
                  noResultsText="未找到"
                  placeholder="请选择"
                >
                </treeselect>
              </div>
              <div class="picker">
                <el-select
                  v-model="employeeForm.salasType"
                  clearable
                  filterable
                  placeholder="请选择数据类型"
                >
                  <el-option
                    v-for="items in statistic"
                    :key="items.dictId"
                    :label="items.dictName"
                    :value="items.dictId"
                  ></el-option>
                </el-select>
              </div>
              <el-date-picker
                v-model="employeeForm.time"
                type="daterange"
                :picker-options="pickerOptions2"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
                format="yyyy- MM- dd"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
              <el-button type="primary" size="mini" @click="refleshBigEmploy"
                >刷新</el-button
              >
            </div>
          </div>
          <vxe-table
            class="xtable"
            height="450px"
            width="100%"
            id="tableData"
            ref="xTable"
            align="center"
            :data="employeeData1.list"
            :cell-style="columnStyle"
          >
            <vxe-table-column
              title="序号"
              field="rowNum"
              width="50"
            ></vxe-table-column>
            <vxe-table-column
              title="员工名称"
              field="label"
              min-width="120px"
            ></vxe-table-column>
            <vxe-table-column
              min-width="120px"
              title="职位"
              field="positionName"
            ></vxe-table-column>
            <vxe-table-column
              min-width="120px"
              :title="title"
              field="value"
            ></vxe-table-column>
          </vxe-table>
          <!-- 分页start -->
          <div class="page">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="employeeData1.totalNum"
                prev-text="上一页"
                next-text="下一页"
              >
              </el-pagination>
            </div>
          </div>
          <!-- 分页end -->
        </div>
      </el-dialog>
    </div>
    <!-- 员工排名弹框 -->
    <!-- 地域弹框 -->
    <el-dialog
      :visible.sync="regionPopUp"
      :append-to-body="true"
      title=""
      style="min-width: 500px"
    >
      <div class="dialog">
        <div class="header dialogNav">
          <p style="min-width: 90px">
            <span style="font-size: 15px">区域分布图</span>
          </p>
          <div class="top_right" style="min-width: 750px">
            <!-- 多选树状下拉框 -->
            <div class="selectTree">
              <el-cascader
                v-model="regionForm.colony"
                :options="options"
                :props="{
                  checkStrictly: true,
                  label: 'orgName',
                  value: 'orgCode',
                  children: 'children',
                }"
                clearable
                filterable
              ></el-cascader>
            </div>
            <!-- 多选树状下拉框 -->

            <div class="picker_select">
              <el-select
                v-model="regionForm.salasType"
                clearable
                filterable
                placeholder="请选择查询类型"
              >
                <el-option
                  v-for="items in statistic"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </div>

            <el-date-picker
              v-model="regionForm.time"
              type="daterange"
              :picker-options="pickerOptions2"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button type="primary" size="mini" @click="refleshbigMap"
              >刷新</el-button
            >
          </div>
        </div>

        <div id="china_map_box">
          <div id="china_map" style="width: 70%; height: 500px"></div>
        </div>
      </div>
    </el-dialog>
    <!-- 地域弹框 -->
    <!-- 性别弹框 -->
    <el-dialog :visible.sync="sexPopUp" :append-to-body="true" title="">
      <div class="dialog">
        <div class="header dialogNav">
          <p>
            <span style="font-size: 15px">性别</span>
          </p>
          <div class="top_right">
            <!-- 多选树状下拉框 -->
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="sexForm.colony"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
            <!-- 多选树状下拉框 -->
            <div class="picker_select">
              <el-select
                v-model="sexForm.salasType"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="items in statistic"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </div>
            <el-date-picker
              v-model="sexForm.time"
              type="daterange"
              :picker-options="pickerOptions2"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button type="primary" size="mini" @click="refleshsex"
              >刷新</el-button
            >
          </div>
        </div>
        <div class="echartlinesex">
          <div
            id="genderEcharts_Popup"
            style="width: 100%; height: 300px"
          ></div>
        </div>
      </div>
    </el-dialog>
    <!-- 性别弹框 -->
    <!-- 部门排行榜弹框 -->
    <el-dialog :visible.sync="teamPopUp" :append-to-body="true" title="">
      <div class="dialog">
        <div class="header dialogNav">
          <p>
            <span style="font-size: 15px">部门排行榜</span>
          </p>
          <div class="top_right">
            <!-- 多选树状下拉框 -->
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="departmentForm.colony"
                search-nested
                :normalizer="normalizer"
                :multiple="true"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
            <!-- 多选树状下拉框 -->
            <div class="picker_select">
              <el-select
                v-model="departmentForm.salasType"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="items in statistic"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </div>

            <el-date-picker
              v-model="departmentForm.time"
              type="daterange"
              :picker-options="pickerOptions2"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button type="primary" size="mini" @click="refleshSalasBig"
              >刷新</el-button
            >
          </div>
        </div>

        <div class="group">
          <div class="checked">
            <el-radio-group
              v-model="departmentForm.checkedTu"
              @change="changTu1"
            >
              <el-radio :label="1">折线图</el-radio>
              <el-radio :label="2">柱状图</el-radio>
            </el-radio-group>

            <el-radio-group
              v-if="departmentForm.checkedTu != 2"
              v-model="departmentForm.checked"
              @change="dayMothon1"
            >
              <el-radio :label="1">按天展示</el-radio>
              <el-radio :label="2">按月展示</el-radio>
            </el-radio-group>
          </div>
          <div class="echart1">
            <div
              v-show="departmentForm.checkedTu == '1'"
              id="teamEchart1"
              style="width: 100%; height: 300px"
            ></div>
            <div
              v-show="departmentForm.checkedTu == '2'"
              id="teamEchart1ZZ"
              style="width: 100%; height: 300px"
            ></div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 部门排行榜弹框 -->
    <!-- 入线方式排行榜弹框 -->
    <el-dialog :visible.sync="linePopUp" :append-to-body="true" title="">
      <div class="dialog">
        <div class="header dialogNav">
          <p>
            <span style="font-size: 15px">入线方式</span>
          </p>
          <div class="top_right">
            <!-- 多选树状下拉框 -->
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="lineForm.colony"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
            <!-- 多选树状下拉框 -->

            <div class="picker_select">
              <el-select
                v-model="lineForm.salasType"
                clearable
                filterable
                placeholder="请选择查询类型"
              >
                <el-option
                  v-for="items in statistic"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </div>

            <el-date-picker
              v-model="lineForm.time"
              type="daterange"
              :picker-options="pickerOptions2"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button type="primary" size="mini" @click="refleshline"
              >刷新</el-button
            >
          </div>
        </div>
        <div class="teamechart">
          <div id="lineEchart_popup" style="width: 100%; height: 300px"></div>
        </div>
      </div>
    </el-dialog>
    <!-- 入线方式排行榜弹框 -->
    <!-- 年龄弹框 -->
    <el-dialog :visible.sync="agoPopUp" :append-to-body="true" title="">
      <div class="dialog">
        <div class="header dialogNav">
          <p>
            <span style="font-size: 15px">年龄</span>
          </p>
          <div class="top_right">
            <!-- 多选树状下拉框 -->
            <div class="selectTree">
              <treeselect
                :options="options"
                v-model="agoForm.colony"
                search-nested
                :normalizer="normalizer"
                noResultsText="未找到"
                placeholder="请选择"
              >
              </treeselect>
            </div>
            <!-- 多选树状下拉框 -->
            <div class="picker_select">
              <el-select
                v-model="agoForm.salasType"
                clearable
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="items in statistic"
                  :key="items.dictId"
                  :label="items.dictName"
                  :value="items.dictId"
                ></el-option>
              </el-select>
            </div>
            <el-date-picker
              v-model="agoForm.time"
              type="daterange"
              :picker-options="pickerOptions2"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              format="yyyy- MM- dd"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button type="primary" size="mini" @click="refleshAgo"
              >刷新</el-button
            >
          </div>
        </div>
        <div class="teamechart">
          <div id="agoEchart_popup" style="width: 100%; height: 300px"></div>
        </div>
      </div>
    </el-dialog>
    <!-- 年龄弹框 -->
  </div>
</template>

<script>
import "echarts/map/js/china.js";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import CountTo from "vue-count-to";
export default {
  name: "home",
  components: { Treeselect, CountTo },
  data () {
    return {
      checkList: "",
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick (picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      checked: 1,
      checkedTu: 1,
      statistic: [], //数据类型
      title: "",
      value4: [this.getTimeAlready()[1], this.getTimeAlready()[1]],
      orgNameTop:
        sessionStorage.getItem("positionCode") == "employee"
          ? JSON.parse(sessionStorage.getItem("userInfo")).id
          : sessionStorage.getItem("orgCode"),
      options: [],
      line: "", //入线方式
      limits: "",
      parArray: [],
      rinkForm: {
        colony: null, //sessionStorage.getItem('orgCodes'),
        salasType: "1",
        time: this.getTimeAlready(),
      },
      //数据判断
      huaxiang: false,
      // 用户画像
      userPortraitSearch: {
        orgCode: sessionStorage.getItem("orgCode"),
        type: "1",
        time: this.getTimeAlready(),
      },
      lineName: "",
      linedata: "",
      ageData: "",
      sexData: "",
      myData: "",
      groupData: "",
      employeeData: "", //员工列表数据
      employeePopUp: false, //员工排名弹框
      employeeData1: "", //放大的员工列表数据
      pageNo: 1,
      pageSize: 10,
      departmentForm: {
        colony: null, //团队
        salasType: "1",
        time: "",
        checkedTu: 1,
        checked: 1,
      },
      teamPopUp: false,

      employeeForm: {
        colony: sessionStorage.getItem("orgCode"), //团队
        salasType: "1",
        time: this.getTimeAlready(),
      },
      mapData: "", //地域数据
      // 区域弹框内容
      regionPopUp: false,
      regionForm: {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      },
      // 性别弹框
      sexPopUp: false,
      sexForm: {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      },
      linePopUp: false,
      lineForm: {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      },
      agoPopUp: false,
      agoForm: {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      },
      dataList: [],
      // 区域弹框内容
      salay: "",
      pageSize: 10,
      currentPage1: 1,
      normalizer (node) {
        return {
          id: node.orgCode,
          label: node.orgName,
          children: node.children,
        };
      },
    };
  },
  mounted () {
    this.$nextTick(() => {
      this.reportLine(); //入线方式
      this.genderReport(); //性别
      this.userPortrait(); //用户画像
      this.ageReport(); //年龄报表
      this.employeeRanking(); //员工排版
      this.departmentAxios();
      // this.departmentRanking(); //部门折线图
    });

    setTimeout(() => {
      if (this.teamChart) {
        this.teamChart.resize();
      }
      if (this.genderEcharts) {
        this.genderEcharts.resize();
      }
      if (this.agesEcharts) {
        this.agesEcharts.resize();
      }
      if (this.Incoming) {
        this.Incoming.resize();
      }
      if (this.chartLineBox) {
        this.chartLineBox.resize();
      }
      if (this.myChart1) {
        this.myChart1.resize();
      }
    }, 2000);
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    if (!this.is_null(this.limits)) {
      const params = this.limits.buttonTreeDto.filter(
        (item) => item.menuCode === "index"
      );
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code);
      });
    }
    let a = [];
    // a.push(
    //   JSON.parse(sessionStorage.getItem("orgCodes"))[JSON.parse(sessionStorage.getItem("orgCodes")).length - 1]
    // );
    a.push(sessionStorage.getItem("orgCode"));
    console.log(a, "a")
    this.rinkForm.colony = a;
    console.log(this.rinkForm.colony, "this.rinkForm.colony")

    this.departmentForm.colony = a;

    this.datatypeAxios();
    this.department();
    this.totalData(
      this.orgNameTop,
      JSON.parse(sessionStorage.getItem("userInfo")).orgType
    );
  },

  methods: {
    // 获取将近前一个月的时间
    getTimeAlready () {
      const end = new Date();
      const start = new Date();
      const time = start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      const endTime = /\d{4}-\d{1,2}-\d{1,2}/g.exec(this.$moment(end))[0];
      const startTime = /\d{4}-\d{1,2}-\d{1,2}/g.exec(this.$moment(time))[0];
      return [startTime, endTime];
    },
    columnStyle ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0 && columnIndex == 0) {
        //第三第四列的背景色就改变了2和3都是列数的下标
        return "color:#FF3B3B;font-weight:bold";
      } else if (rowIndex == 1 && columnIndex == 0) {
        return "color:#F5A623;font-weight:bold";
      } else if (rowIndex == 2 && columnIndex == 0) {
        return "color:#3D7FFF;font-weight:bold";
      }
    },
    is_null (content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
    // 分页
    handleCurrentChange (val) {
      this.pageNo = val;
      this.employeeRanking1();
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.employeeRanking1();
    },
    // 查看的数据类型
    datatypeAxios () {
      this.axios
        .get("/sys/v1/common/by/group?groupId=" + "statistic_type", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.statistic = res.data;
          }
        });
    },
    // 查看的数据类型
    // 部门选择列表
    department () {
      this.axios
        .get("/sys/v1/org/select/org/user", {
          headers: {
            isLoading: false,
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.options = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 添加客户
    addCustom () {
      this.$router.push({
        name: "addCustomer",
      });
    },
    queryCus () {
      this.$router.push({
        name: "myCustomers",
      });
    },
    //****  刷新 ****//
    //销售排版刷新
    refleshSalas () {
      let data = [];
      // console.log(this.rinkForm.colony);
      if (this.rinkForm.colony) {
        for (let i in this.rinkForm.colony) {
          this.getMenuBtnList(this.options, data, this.rinkForm.colony[i]);
        }
      }
      if (this.rinkForm.time == "" || this.rinkForm.time == undefined) {
        this.rinkForm.time = this.getTimeAlready();
      }
      if (this.rinkForm.colony == "" || this.rinkForm.colony == undefined) {
        // this.rinkForm.colony = JSON.parse(sessionStorage.getItem("orgCodes"));
        let a = [];
        a.push(
          JSON.parse(sessionStorage.getItem("orgCodes"))[
          JSON.parse(sessionStorage.getItem("orgCodes")).length - 1
          ]
        );
        this.rinkForm.colony = a;
        this.departmentForm.colony = a;
      }
      if (
        this.rinkForm.salasType == "" ||
        this.rinkForm.salasType == undefined
      ) {
        this.rinkForm.salasType = "1";
      }

      if (data.length > 0) {
        this.departmentAxios(data);
      } else {
        this.departmentAxios();
      }
      document.getElementById("bumen").removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance_ 属性
    },
    //大图性别刷新
    refleshsex () {
      let data = [];
      if (this.sexForm.colony) {
        this.getMenuBtnList(this.options, data, this.sexForm.colony);
      }

      if (this.sexForm.time == "" || this.sexForm.time == undefined) {
        this.sexForm.time = this.getTimeAlready();
      }
      if (this.sexForm.colony == "" || this.sexForm.colony == undefined) {
        this.sexForm.colony = sessionStorage.getItem("orgCode");
      }
      if (this.sexForm.salasType == "" || this.sexForm.salasType == undefined) {
        this.sexForm.salasType = "1";
      }

      if (data.length > 0) {
        this.genderReportBig(data[0].orgCode, data[0].type);
      } else {
        this.genderReportBig();
      }
    },

    //大图入线方式刷新
    refleshline () {
      let data = [];
      if (this.lineForm.colony) {
        this.getMenuBtnList(this.options, data, this.lineForm.colony);
      }

      if (this.lineForm.time == "" || this.lineForm.time == undefined) {
        this.lineForm.time = this.getTimeAlready();
      }
      if (this.lineForm.colony == "" || this.lineForm.colony == undefined) {
        this.lineForm.colony = sessionStorage.getItem("orgCode");
      }
      if (
        this.lineForm.salasType == "" ||
        this.lineForm.salasType == undefined
      ) {
        this.lineForm.salasType = "1";
      }

      if (data.length > 0) {
        this.lineAxios(data[0].orgCode, data[0].type);
      } else {
        this.lineAxios();
      }
    },
    //大图年龄刷新
    refleshAgo () {
      let data = [];
      if (this.agoForm.colony) {
        this.getMenuBtnList(this.options, data, this.agoForm.colony);
      }

      if (this.agoForm.time == "" || this.agoForm.time == undefined) {
        this.agoForm.time = this.getTimeAlready();
      }

      if (this.agoForm.colony == "" || this.agoForm.colony == undefined) {
        this.agoForm.colony = sessionStorage.getItem("orgCode");
      }
      if (this.agoForm.salasType == "" || this.agoForm.salasType == undefined) {
        this.agoForm.salasType = "1";
      }

      if (data.length > 0) {
        this.ageAxios(data[0].orgCode, data[0].type);
      } else {
        this.ageAxios();
      }
    },

    employeeRankingClick () {
      this.employeePopUp = true;
      this.employeeForm = {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      };
      this.employeeRanking1();
    },

    /**员工排行榜大图展示刷新**/
    refleshBigEmploy () {
      let data = [];
      if (this.employeeForm.colony) {
        this.getMenuBtnList(this.options, data, this.employeeForm.colony);
      }
      if (data.length > 0) {
        this.employeeRanking1(data[0].orgCode, data[0].type);
      } else {
        this.employeeRanking1();
      }
    },
    /**员工排行榜大图展示刷新**/
    /**员工大地图展示刷新**/
    refleshbigMap () {
      let data = [];

      if (this.regionForm.colony[0]) {
        this.getMenuBtnList(
          this.options,
          data,
          this.regionForm.colony[this.regionForm.colony.length - 1]
        );
      }

      if (this.regionForm.time == "" || this.regionForm.time == undefined) {
        this.regionForm.time = this.getTimeAlready();
      }
      if (this.regionForm.colony == "" || this.regionForm.colony == undefined) {
        this.regionForm.colony = sessionStorage.getItem("orgCode");
      }
      if (
        this.regionForm.salasType == "" ||
        this.regionForm.salasType == undefined
      ) {
        this.regionForm.salasType = "1";
      }

      if (data.length > 0) {
        this.userPortraitbig(data[0].orgCode, data[0].type);
      } else {
        this.userPortraitbig();
      }
    },
    /**员工大地图展示刷新**/

    // 递归
    getMenuBtnList (menuTreeList, menuList, code) {
      for (let item of menuTreeList) {
        if (item.orgCode == code) {
          menuList.push({
            lable: item.orgName,
            orgCode: item.orgCode,
            type: item.type,
          });
        } else if (item.children && item.children.length > 0) {
          this.getMenuBtnList(item.children, menuList, code);
        }
      }
    },
    //****  刷新 ****//
    // reflesh() {
    //   let beginTime = "";
    //   let endTime = "";
    //   if (this.value4) {
    //     beginTime = this.value4[0];
    //     endTime = this.value4[1];
    //   }
    // },
    //用户画像模块刷新
    refleshUser () {
      let data = [];
      if (this.userPortraitSearch.orgCode) {
        this.getMenuBtnList(
          this.options,
          data,
          this.userPortraitSearch.orgCode
        );
      }

      if (
        this.userPortraitSearch.time == "" ||
        this.userPortraitSearch.time == undefined
      ) {
        this.userPortraitSearch.time = this.getTimeAlready();
      }

      if (
        this.userPortraitSearch.orgCode == "" ||
        this.userPortraitSearch.orgCode == undefined
      ) {
        this.userPortraitSearch.orgCode = sessionStorage.getItem("orgCode");
      }

      if (
        this.userPortraitSearch.type == "" ||
        this.userPortraitSearch.type == undefined
      ) {
        this.userPortraitSearch.type = "1";
      }

      if (data.length > 0) {
        this.reportLine(data[0].orgCode, data[0].type);
        this.genderReport(data[0].orgCode, data[0].type);
        this.userPortrait(data[0].orgCode, data[0].type);
        this.ageReport(data[0].orgCode, data[0].type);
      } else {
        this.reportLine(); //入线渠道
        this.genderReport(); //性别
        this.userPortrait(); //区域
        this.ageReport(); //年龄
      }
    },
    // 我的数据(数据看板)
    // 刷新
    refleshTop () {
      let data = [];

      if (this.orgNameTop) {
        this.getMenuBtnList(this.options, data, this.orgNameTop);
      } else {
        this.orgNameTop =
          sessionStorage.getItem("positionCode") == "employee"
            ? JSON.parse(sessionStorage.getItem("userInfo")).id
            : sessionStorage.getItem("orgCode");
      }

      if (this.value4 == "" || this.value4 == undefined) {
        this.value4 = [this.getTimeAlready()[1], this.getTimeAlready()[1]];
      }

      if (data.length > 0) {
        this.totalData(data[0].orgCode, data[0].type);
      } else {
        this.totalData(this.orgNameTop);
      }
    },
    totalData (orgCode, type) {
      let beginTime = "";
      let endTime = "";
      if (this.value4) {
        beginTime = this.value4[0];
        endTime = this.value4[1];
      }
      this.axios
        .post(
          "/order/v2/home/sales/data/statistics",
          {
            request: {
              endTime: endTime,
              orgCode: orgCode,
              startTime: beginTime,
              orgType: type,
            },
            version: "",
          },
          {
            headers: {
              isLoading: true,
            },
          }
        )
        .then((res) => {
          // console.log("我的数据");
          // console.log(res);
          if (res.code == 0) {
            this.myData = res.data;
          } else {
          }
        });
    },
    //我的数据

    // 客户入线方式报表
    reportLine (orgCode, orgType) {
      let beginTime = "";
      let endTime = "";
      if (this.userPortraitSearch.time) {
        beginTime = this.userPortraitSearch.time[0];
        endTime = this.userPortraitSearch.time[1];
      }
      this.axios
        .post("/order/v2/home/user/portrait/line/way", {
          request: {
            orgCode: orgCode,
            orgType: orgType,
            statisticType:
              this.userPortraitSearch.type == ""
                ? "1"
                : this.userPortraitSearch.type,
            endTime: endTime,
            startTime: beginTime,
          },
          version: "",
        })
        .then((res) => {
          // console.log("客户入线方式报表");
          if (res.code == 0) {
            // console.log(res);
            if (!this.is_null(res.data)) {
              this.linedata = true;
            } else {
              this.linedata = false;
            }
            this.IncomingEcharts(res.data); //入线方式
          } else {
            this.linedata = false;
          }
        });
    },
    // 性别统计
    genderReport (orgCode, orgType) {
      let beginTime = "";
      let endTime = "";
      if (this.userPortraitSearch.time) {
        beginTime = this.userPortraitSearch.time[0];
        endTime = this.userPortraitSearch.time[1];
      }
      this.axios
        .post(
          "/order/v2/home/user/portrait/gender",
          {
            request: {
              endTime: endTime,
              orgCode: orgCode,
              orgType: orgType,
              startTime: beginTime,
              statisticType:
                this.userPortraitSearch.type == ""
                  ? "1"
                  : this.userPortraitSearch.type,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("性别统计");
          if (res.code == 0) {
            if (!this.is_null(res.data)) {
              this.sexData = true;
            } else {
              this.sexData = false;
            }
            this.genderRectangles(res.data); //性别条形图式
          } else {
            this.sexData = false;
          }
        });
    },

    // 性别大图数据
    genderReportBig (orgCode, orgType) {
      let beginTime = "";
      let endTime = "";
      if (this.sexForm.time) {
        beginTime = this.sexForm.time[0];
        endTime = this.sexForm.time[1];
      }
      this.axios
        .post(
          "/order/v2/home/user/portrait/gender",
          {
            request: {
              endTime: endTime,
              orgCode: orgCode,
              orgType: orgType,
              startTime: beginTime,
              statisticType:
                this.sexForm.salasType == "" ? "1" : this.sexForm.salasType,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("性别统计");
          if (res.code == 0) {
            this.genderEchartsData(res.data); //性别条形图式
          }
        });
    },

    // （地域）
    userPortrait (orgCode, orgType) {
      let beginTime = "";
      let endTime = "";
      if (this.userPortraitSearch.time) {
        beginTime = this.userPortraitSearch.time[0];
        endTime = this.userPortraitSearch.time[1];
      }
      this.axios
        .post(
          "/order/v2/home/user/portrait/area",
          {
            request: {
              endTime: endTime,
              orgCode: orgCode,
              orgType: orgType,
              startTime: beginTime,
              statisticType:
                this.userPortraitSearch.type == ""
                  ? "1"
                  : this.userPortraitSearch.type,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("地域");
          // console.log(res);
          if (res.code == 0) {
            this.mapData = res.data;
            if (!this.is_null(res.data)) {
              this.huaxiang = true;
            } else {
              this.huaxiang = false;
            }
            this.lineCharts(res.data);
          } else {
            this.huaxiang = false;
          }
        });
    },

    userPortraitbig (orgCode, orgType) {
      let beginTime = "";
      let endTime = "";
      if (this.regionForm.time) {
        beginTime = this.regionForm.time[0];
        endTime = this.regionForm.time[1];
      }
      this.axios
        .post("/order/v2/home/user/portrait/area", {
          request: {
            endTime: endTime,
            orgCode: orgCode,
            orgType: orgType,
            startTime: beginTime,
            statisticType:
              this.regionForm.salasType == "" ? "1" : this.regionForm.salasType,
          },
          version: "",
        })
        .then((res) => {
          // console.log("地域");
          // console.log(res);
          if (res.code == 0) {
            this.mapData = res.data;
            this.$nextTick(() => {
              this.initEchartMap();
            });
          }
        });
    },

    // 年龄条形图
    ageReport (orgCode, orgType) {
      let beginTime = "";
      let endTime = "";
      if (this.userPortraitSearch.time) {
        beginTime = this.userPortraitSearch.time[0];
        endTime = this.userPortraitSearch.time[1];
      }

      this.axios
        .post(
          "/order/v2/home/user/portrait/age",
          {
            request: {
              statisticType:
                this.userPortraitSearch.type == ""
                  ? "1"
                  : this.userPortraitSearch.type,
              orgCode: orgCode,
              orgType: orgType,
              endTime: endTime,
              startTime: beginTime,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("年龄条形图");
          if (res.code == 0) {
            if (!this.is_null(res.data)) {
              this.ageData = true;
            } else {
              this.ageData = false;
            }
            this.agesRectangles(res.data); //年龄条形图;
          } else {
            this.ageData = false;
          }
        });
    },

    //** 员工排名 **//
    //小列表
    employeeRanking (endTime, startTime) {
      this.axios
        .post(
          "/order/v2/home/employee/sale/ranking",
          {
            request: {
              endTime: endTime,
              startTime: startTime,
              statisticType: 1, //统计类型
              orgCode: "",
              orgType: "",
              pageNo: 1,
              pageSize: 12,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.employeeData = res.data.list;
          }
        });
    },
    //大列表
    employeeRanking1 (orgCode, orgType) {
      let startTime = "";
      let endTime = "";
      if (this.employeeForm.time) {
        startTime = this.employeeForm.time[0];
        endTime = this.employeeForm.time[1];
      }
      this.axios
        .post(
          "/order/v2/home/employee/sale/ranking",
          {
            request: {
              endTime: endTime,
              startTime: startTime,
              statisticType:
                this.employeeForm.salasType == ""
                  ? "1"
                  : this.employeeForm.salasType, //统计类型
              orgCode: orgCode,
              orgType: orgType,
              pageNo: this.pageNo,
              pageSize: this.pageSize,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.employeeData1 = res.data;

            for (let i in this.statistic) {
              if (this.statistic[i].dictId == this.employeeForm.salasType) {
                this.title = this.statistic[i].dictName;
              }
            }
          }
          // console.log(this.employeeData1.totalNum + "---totalNum");
        });
    },
    //** 员工排名 **//
    // 销售榜单数据
    departmentAxios (orgList) {
      let startTime = "";
      let endTime = "";
      if (this.rinkForm.time) {
        startTime = this.rinkForm.time[0];
        endTime = this.rinkForm.time[1];
      }

      for (let i in orgList) {
        if (orgList[0].type != orgList[i].type) {
          this.$message.warning("查询传入组织类型不同");
          return;
        }
      }

      this.axios
        .post(
          "/order/v2/home/sales/rank/statistics",
          {
            request: {
              displayType: this.checkedTu,
              lineType: this.checked,
              orgList: orgList,
              endTime: endTime,
              startTime: startTime,
              statisticType:
                this.rinkForm.salasType == "" ? "1" : this.rinkForm.salasType,
            },
            version: "",
          },
          {
            headers: {
              isLoading: true,
            },
          }
        )
        .then((res) => {
          console.log(res, "res");
          if (res.code == 0 && JSON.stringify(res.data) != "{}") {
            var xdata = [];
            var ydata = [];
            var datatotal = [];
            this.titleSvg = [];
            if (this.checkedTu == "1") {
              for (let key in res.data) {
                this.titleSvg.push(key);
                datatotal.push(res.data[key]);
                xdata.push({
                  type: "line",
                  symbol: "none",
                  smooth: true,
                  name: key,
                  animationDuration: 2800,
                  animationEasing: "quadraticOut",
                  data: [],
                });
              }
              // 获取x轴的数据
              datatotal[0].forEach((items) => {
                ydata.push(items.label);
              });

              for (let i = 0; i < datatotal.length; i++) {
                for (let j = 0; j < datatotal[i].length; j++) {
                  xdata[i].data.push(datatotal[i][j].value);
                }
              }
              this.departmentRanking(xdata, ydata);
            } else {
              res.data.forEach((items) => {
                xdata.push(items.label);
                ydata.push(items.value);
              });
              this.departmentRankingZZ(xdata, ydata);
            }
          } else {
            this.$message.warning("暂无数据");
            if (this.checkedTu == "1") {
              this.departmentRanking();
            } else {
              this.departmentRankingZZ();
            }
          }
        });
    },
    dayMothon (e) {
      this.checked = e;
      let data = [];
      if (this.rinkForm.colony) {
        for (let i in this.rinkForm.colony) {
          this.getMenuBtnList(this.options, data, this.rinkForm.colony[i]);
        }
      }

      if (data.length > 0) {
        this.departmentAxios(data);
      } else {
        this.departmentAxios();
      }

      document.getElementById("bumen").removeAttribute("_echarts_instance_");
      document.getElementById("bumenZZ").removeAttribute("_echarts_instance_");
    },

    // 部门排行榜
    departmentRanking (xdata, ydata) {
      // 基于准备好的dom，初始化echarts实例
      this.teamChart = this.$echarts.init(document.getElementById("bumen"));
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          right: 10,
          data: this.titleSvg,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          x: "left",
          feature: {},
        },
        color: ["#6699FF", "#52CCA3", "#ff9933", "#006699", "#4cabce"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ydata,
          axisLine: {
            lineStyle: {
              color: "#999", //x轴的颜色
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            // show: false,
            lineStyle: {
              type: "dotted",
            },
          },
          axisTick: {
            show: true, //刻度
          },
          axisLine: {
            //y轴线
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999",
            },
          },
        },
        series: xdata, //展示数据
      };
      this.option = option;
      this.teamChart.setOption(option);

      window.onresize = () => {
        this.genderEcharts.resize();
        this.agesEcharts.resize();
        this.Incoming.resize();
        this.chartLineBox.resize();
        this.teamChart.resize();
        if (this.myChart1) {
          this.myChart1.resize();
        }
      };
    },

    changTu (e) {
      this.checkedTu = e;
      let data = [];
      if (this.rinkForm.colony) {
        for (let i in this.rinkForm.colony) {
          this.getMenuBtnList(this.options, data, this.rinkForm.colony[i]);
        }
      }
      if (data.length > 0) {
        this.departmentAxios(data);
      } else {
        this.departmentAxios();
      }
      document.getElementById("bumen").removeAttribute("_echarts_instance_");
      document.getElementById("bumenZZ").removeAttribute("_echarts_instance_");
    },

    departmentRankingZZ (xdata, ydata) {
      this.myChart1 = this.$echarts.init(document.getElementById("bumenZZ"));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {
              //数据视图
              show: true,
            },
            restore: {
              //重置
              show: true,
            },
          },
        },
        legend: {
          data: [""],
        },
        xAxis: {
          data: xdata,
          axisLabel: {
            show: true,
            textStyle: {
              color: (value, index) => {
                return index == this.myChart1Index ? "#333" : "#999";
              },
            },
          },
          axisLine: {
            lineStyle: {
              color: "#EBEEF5", //左边线的颜色
            },
          },
        },
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisTick: {
              show: false, //刻度
            },
            axisLine: {
              //y轴线
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999",
              },
            },
          },
        ],
        grid: {
          left: 80,
        },
        series: [
          {
            type: "bar",
            barWidth: 10,
            data: ydata,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(235, 238, 245, 1)",
            },
            // 设置折线图颜色
            itemStyle: {
              normal: {
                color: (data) => {
                  let itemColor = "#52CCA3";
                  if (this.myChart1Index !== "") {
                    // 根据点击事件产生的index来判断，设置背景色
                    if (this.myChart1Index == data.dataIndex) {
                      itemColor = "#02c9cc";
                    }
                  }
                  return itemColor;
                },
                width: 6 + "px",
                barBorderRadius: [10, 10, 5, 5],
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart1.setOption(option);
      this.myChart1.on("click", (param) => {
        const pointInPixel = [param.event.offsetX, param.event.offsetY];
        if (this.myChart1.containPixel("grid", pointInPixel)) {
          let xIndex = this.myChart1.convertFromPixel(
            {
              seriesIndex: 0,
            },
            [param.event.offsetX, param.event.offsetY]
          )[0];
          this.myChart1Index = param.dataIndex;
        }
        this.myChart1.setOption(option); //柱形图重构
      });
    },

    //用户画像--地址
    lineCharts (param) {
      var xdata = [];
      let param1 = param.slice(0, 7);
      var ydata = [];
      param1.forEach((item) => {
        xdata.push(item.label);
        ydata.push({
          value: item.value,
          name: item.label,
        });
      });
      // console.log(param1)
      this.chartLineBox = this.$echarts.init(
        document.getElementById("chartLineBox")
      );
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 20,
          top: 40,
          bottom: 0,
          data: xdata,
          textStyle: {
            color: "#999999",
            fontSize: 9,
          },
          itemWidth: 8,
          itemHeight: 8,
          icon: "circle",
        },
        color: [
          "#A1E6CE",
          "#52CCA3",
          "#6699FF",
          "#bddfff",
          "#7D8FB3",
          "#08b0b3",
          "#55aaff",
        ],
        series: [
          {
            type: "pie",
            radius: "60%",
            center: ["42%", "50%"],
            data: ydata,
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.chartLineBox.setOption(option);
    },
    // 入线方式
    IncomingEcharts (param) {
      var xAxisline = [];
      var ydata = [];
      let param1 = param.slice(0, 7);
      param1.forEach((item) => {
        xAxisline.push(item.label);
        ydata.push(item.value);
      });
      this.Incoming = this.$echarts.init(document.getElementById("Incoming"));
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: 55,
          bottom: 0,
          top: 4,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: [
          {
            type: "category",
            data: xAxisline,
            axisLine: {
              show: false, //坐标线
            },
            axisTick: {
              show: false, //刻度线
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: (value, index) => {
                  return index == this.IncomingIndex ? "#333" : "#999";
                },
              },
            },
          },
        ],
        series: [
          {
            data: ydata,
            type: "bar",
            barWidth: 10,
            label: {
              show: true,
              position: "inside",
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(235, 238, 245, 1)",
            },
            // 设置颜色
            itemStyle: {
              normal: {
                width: 12 + "px",
                barBorderRadius: [10, 10, 10, 10],
                color: (data) => {
                  let itemColor = "#9580FF";
                  if (this.IncomingIndex !== "") {
                    // 根据点击事件产生的index来判断，设置背景色
                    if (this.IncomingIndex == data.dataIndex) {
                      itemColor = "#9807ff";
                    }
                  }
                  return itemColor;
                },
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.Incoming.setOption(option);
      this.Incoming.on("click", (param) => {
        const pointInPixel = [param.event.offsetX, param.event.offsetY];
        if (this.Incoming.containPixel("grid", pointInPixel)) {
          let xIndex = this.Incoming.convertFromPixel(
            {
              seriesIndex: 0,
            },
            [param.event.offsetX, param.event.offsetY]
          )[0];
          this.IncomingIndex = param.dataIndex;
        }
        this.Incoming.setOption(option); //柱形图重构
      });
    },
    // 年龄小图
    agesRectangles (param) {
      var xdata = [];
      var ydata = [];
      let param1 = param.slice(0, 7);
      param1.forEach((item) => {
        xdata.push(item.label);
        ydata.push({
          value: item.value,
          name: item.label,
        });
      });
      this.agesEcharts = this.$echarts.init(
        document.getElementById("agesEcharts")
      );
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 20,
          top: 40,
          bottom: 0,
          data: xdata,
          textStyle: {
            color: "#999999",
            fontSize: 9,
          },
          itemWidth: 8,
          itemHeight: 8,
          icon: "circle",
        },
        color: [
          "#6699FF",
          "#A1E6CE",
          "#52CCA3",
          "#B3CDFF",
          "#B3CDFF",
          "#7D8FB3",
          "#ff9166",
        ],
        series: [
          {
            name: "年龄统计",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            center: ["42%", "50%"],
            data: ydata,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.agesEcharts.setOption(option);
    },
    //性别  小图
    genderRectangles (param) {
      var xdata = [];
      var ydata = [];
      param.forEach((item) => {
        xdata.push(item.label);
        ydata.push({
          value: item.value,
          name: item.label,
        });
      });
      this.genderEcharts = this.$echarts.init(
        document.getElementById("genderEcharts")
      );
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 20,
          top: 60,
          bottom: 0,
          data: xdata,
          textStyle: {
            color: "#999999",
            fontSize: 9,
          },
          itemWidth: 8,
          itemHeight: 8,
          icon: "circle",
        },
        grid: {
          right: "4%",
          bottom: "0",
          top: 10,
          containLabel: true,
        },
        color: ["#becfe4", "#6699FF", "#FFA8A8"],
        series: [
          {
            type: "pie",
            radius: "60%",
            center: ["50%", "50%"],
            data: ydata,
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.genderEcharts.setOption(option);
    },
    mapEvent () {
      this.regionPopUp = true;
      this.regionForm = {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      };
      this.userPortraitbig();
    },
    //初始化中国地图
    initEchartMap () {
      let mapDiv = document.getElementById("china_map");
      this.myChartMap = this.$echarts.init(mapDiv);
      var dataMap = [];
      this.mapData.forEach((items) => {
        dataMap.push({
          value: Number(items.value),
          name: items.label.split("省")[0],
        });
      });
      // console.log(dataMap);
      let options = {
        tooltip: {
          triggerOn: "mousemove", //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: "#409eff",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000000",
            fontSize: 13,
          },
        },
        visualMap: {
          show: true,
          left: 26,
          bottom: 40,
          showLabel: true,
          pieces: [
            {
              gte: 100000001, //1亿
              label: ">=1亿",
              color: "#d60712",
            },
            {
              gte: 10000001, //99w
              lt: 100000000, //千w
              label: "1千万 - 1亿",
              color: "#ddcfe6",
            },
            {
              gte: 100000,
              lt: 10000000,
              label: "10万 - 1千万",
              color: "#5faeff",
            },
            {
              gte: 1000,
              lt: 100000, //10w
              label: "1000 - 10万",
              color: "#ff9166",
            },
            {
              lt: 999, //lt最大值
              label: "<1000",
              color: "#e4f1d7",
            },
          ],
        },
        geo: {
          map: "china",
          scaleLimit: {
            min: 1,
            max: 2,
          },
          zoom: 1,
          top: 0,
          label: {
            normal: {
              show: true,
              fontSize: "14",
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              //shadowBlur: 50,
              //shadowColor: 'rgba(0, 0, 0, 0.2)',
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f2d5ad",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0,
            },
          },
        },
        series: [
          {
            name: "地域分布图",
            type: "map",
            geoIndex: 0,
            data: dataMap,
          },
        ],
      };
      this.myChartMap.setOption(options);
      window.onresize = (res) => {
        if (this.regionPopUp) {
          this.myChartMap.resize();
        }
      };
    },
    //*** 性别弹框数据  ***//
    sexEvent () {
      this.sexPopUp = true;
      this.sexForm = {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      };
      this.$nextTick(() => {
        this.genderReportBig();
      });
    },
    /***echarts图***/
    genderEchartsData (param) {
      var xdata = [];
      var ydata = [];
      param.forEach((item) => {
        xdata.push(item.label);
        ydata.push({
          value: item.value,
          name: item.label,
        });
      });

      this.genderEcharts_Popup = this.$echarts.init(
        document.getElementById("genderEcharts_Popup")
      );
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 20,
          top: 60,
          bottom: 0,
          data: xdata,
          textStyle: {
            color: "#999999",
            fontSize: 9,
          },
          itemWidth: 8,
          itemHeight: 8,
          icon: "circle",
        },
        color: ["#eee", "#6699FF", "#FFA8A8"],
        series: [
          {
            type: "pie",
            radius: "60%",
            center: ["50%", "40%"],
            data: ydata,
            label: {
              normal: {
                position: "inner",
                show: false,
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.genderEcharts_Popup.setOption(option);
      window.onresize = (res) => {
        if (this.sexPopUp) {
          this.genderEcharts_Popup.resize();
        }
      };
    },
    //*** 性别弹框数据  ***//

    //**部门排行榜大数据**//
    departmentAxiosBig (orgList) {
      let startTime = "";
      let endTime = "";
      if (this.departmentForm.time) {
        startTime = this.departmentForm.time[0];
        endTime = this.departmentForm.time[1];
      }

      for (let i in orgList) {
        if (orgList[0].type != orgList[i].type) {
          this.$message.warning("查询传入组织类型不同");
          return;
        }
      }

      this.axios
        .post(
          "/order/v2/home/sales/rank/statistics",
          {
            request: {
              displayType: this.departmentForm.checkedTu,
              lineType: this.departmentForm.checked,
              orgList: orgList,
              endTime: endTime,
              startTime: startTime,
              statisticType:
                this.departmentForm.salasType == ""
                  ? "1"
                  : this.departmentForm.salasType,
            },
            version: "",
          },
          {
            headers: {
              isLoading: true,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          if (res.code == 0 && JSON.stringify(res.data) != "{}") {
            var xdata = [];
            var ydata = [];
            var datatotal = [];
            this.titleSvg1 = [];
            if (this.departmentForm.checkedTu == "1") {
              for (let key in res.data) {
                this.titleSvg1.push(key);
                datatotal.push(res.data[key]);
                xdata.push({
                  //初始化数据格式
                  type: "line",
                  symbol: "none",
                  smooth: true,
                  name: key,
                  data: [],
                });
              }
              // 获取x轴的数据
              datatotal[0].forEach((items) => {
                ydata.push(items.label);
              });

              for (let i = 0; i < datatotal.length; i++) {
                for (let j = 0; j < datatotal[i].length; j++) {
                  xdata[i].data.push(datatotal[i][j].value);
                }
              }
              this.TeamLineData(xdata, ydata);
            } else {
              res.data.forEach((items) => {
                xdata.push(items.label);
                ydata.push(items.value);
              });
              this.TeamLineDataZZ(xdata, ydata);
            }
          } else {
            this.$message.warning("暂无数据");
            if (this.departmentForm.checkedTu == "1") {
              this.TeamLineData();
            } else {
              this.TeamLineDataZZ();
            }
          }
        });
    },
    //销售排版刷新
    refleshSalasBig () {
      let data = [];
      if (this.departmentForm.colony) {
        for (let i in this.departmentForm.colony) {
          this.getMenuBtnList(
            this.options,
            data,
            this.departmentForm.colony[i]
          );
        }
      }

      if (
        this.departmentForm.time == "" ||
        this.departmentForm.time == undefined
      ) {
        this.departmentForm.time = this.getTimeAlready();
      }

      if (
        this.departmentForm.salasType == "" ||
        this.departmentForm.salasType == undefined
      ) {
        this.departmentForm.salasType = "1";
      }

      if (
        this.departmentForm.colony == "" ||
        this.departmentForm.colony == undefined
      ) {
        let a = [];
        a.push(
          JSON.parse(sessionStorage.getItem("orgCodes"))[
          JSON.parse(sessionStorage.getItem("orgCodes")).length - 1
          ]
        );
        this.departmentForm.colony = a;
        this.departmentForm.colony = a;
      }

      if (data.length > 0) {
        this.departmentAxiosBig(data);
      } else {
        this.departmentAxiosBig();
      }
      document
        .getElementById("teamEchart1")
        .removeAttribute("_echarts_instance_"); // 移除容器上的 _echarts_instance_ 属性
    },
    dayMothon1 (e) {
      this.departmentForm.checked = e;

      let data = [];
      if (this.departmentForm.colony) {
        for (let i in this.departmentForm.colony) {
          this.getMenuBtnList(
            this.options,
            data,
            this.departmentForm.colony[i]
          );
        }
      }

      if (data.length > 0) {
        this.departmentAxiosBig(data);
      } else {
        this.departmentAxiosBig(data);
      }

      document.getElementById("bumen").removeAttribute("_echarts_instance_");
      document.getElementById("bumenZZ").removeAttribute("_echarts_instance_");
    },

    changTu1 (e) {
      this.departmentForm.checkedTu = e;

      let data = [];
      if (this.departmentForm.colony) {
        for (let i in this.departmentForm.colony) {
          this.getMenuBtnList(
            this.options,
            data,
            this.departmentForm.colony[i]
          );
        }
      }

      if (data.length > 0) {
        this.departmentAxiosBig(data);
      } else {
        this.departmentAxiosBig(data);
      }

      document.getElementById("bumen").removeAttribute("_echarts_instance_");
      document.getElementById("bumenZZ").removeAttribute("_echarts_instance_");
    },

    teamEvent () {
      this.teamPopUp = true;
      this.$nextTick(() => {
        this.departmentAxiosBig();
      });

      let a = [];
      // a.push(
      //   JSON.parse(sessionStorage.getItem("orgCodes"))[
      //   JSON.parse(sessionStorage.getItem("orgCodes")).length - 1
      //   ]
      // );
      a.push(
        sessionStorage.getItem("orgCode")
      );

      this.departmentForm = {
        colony: a, //团队
        salasType: "1",
        time: this.getTimeAlready(),
        checkedTu: 1,
        checked: 1,
      };
    },

    TeamLineData (xdata, ydata) {
      this.teamEchart1 = this.$echarts.init(
        document.getElementById("teamEchart1")
      );
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          right: 10,
          data: this.titleSvg1,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          x: "left",
          feature: {},
        },
        color: ["#6699FF", "#52CCA3", "#ff9933", "#006699", "#4cabce"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ydata,
          axisLine: {
            lineStyle: {
              color: "#999", //x轴的颜色
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            // show: false,
            lineStyle: {
              type: "dotted",
            },
          },
          axisTick: {
            show: true, //刻度
          },
          axisLine: {
            //y轴线
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999",
            },
          },
        },
        series: xdata, //展示数据
      };
      this.teamEchart1.setOption(option);
      window.onresize = (res) => {
        if (this.teamPopUp) {
          this.teamEchart1.resize();
        }
      };
    },
    TeamLineDataZZ (xdata, ydata) {
      this.teamEchart1ZZ = this.$echarts.init(
        document.getElementById("teamEchart1ZZ")
      );
      // 指定图表的配置项和数据
      var option = {
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {
              //数据视图
              show: true,
            },
            restore: {
              //重置
              show: true,
            },
          },
        },
        legend: {
          data: [""],
        },
        xAxis: {
          data: xdata,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#EBEEF5", //左边线的颜色
            },
          },
        },
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisTick: {
              show: false, //刻度
            },
            axisLine: {
              //y轴线
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999",
              },
            },
          },
        ],
        grid: {
          left: 80,
        },
        series: [
          {
            type: "bar",
            barWidth: 10,
            data: ydata,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(235, 238, 245, 1)",
            },
            // 设置折线图颜色
            itemStyle: {
              normal: {
                color: "#52CCA3",
                width: 6 + "px",
                barBorderRadius: [10, 10, 5, 5],
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.teamEchart1ZZ.setOption(option);
    },
    //**部门排行榜大数据**//

    //*** 入线方式大数据 ***//
    lineAxios (orgCode, orgType) {
      let beginTime = "";
      let endTime = "";
      if (this.lineForm.time) {
        beginTime = this.lineForm.time[0];
        endTime = this.lineForm.time[1];
      }

      this.axios
        .post(
          "/order/v2/home/user/portrait/line/way",
          {
            request: {
              orgCode: orgCode,
              orgType: orgType,
              statisticType:
                this.lineForm.salasType == "" ? "1" : this.lineForm.salasType,
              endTime: endTime,
              startTime: beginTime,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          // console.log("入线方式");
          // console.log(res);
          if (res.code == 0) {
            this.lineEchartsSvg(res.data); //入线方式
          }
        });
    },
    lineEvent () {
      this.linePopUp = true;
      (this.lineForm = {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      }),
        this.$nextTick(() => {
          this.lineAxios(); //点击请求的数据
        });
    },
    // 数据图形
    lineEchartsSvg (param) {
      var xdata = [];
      var ydata = [];
      param.forEach((item) => {
        xdata.push(item.label);
        ydata.push(Number(item.value));
      });
      // 基于准备好的dom，初始化echarts实例
      this.lineEchart_popup = this.$echarts.init(
        document.getElementById("lineEchart_popup")
      );
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "",
        },
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {
              //数据视图
              show: true,
            },
            restore: {
              //重置
              show: true,
            },
          },
        },
        legend: {
          data: [""],
        },
        dataZoom: [
          {
            show: true,
            start: 0,
            end: 100,
          },
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            data: xdata,
            axisLabel: {
              show: true,
              textStyle: {
                color: (value, index) => {
                  return index == this.lineIndex ? "#333" : "#999";
                },
              },
            },
            axisLine: {
              lineStyle: {
                color: "#EBEEF5", //左边线的颜色
              },
            },
          },
        ],
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            axisTick: {
              show: false, //刻度
            },
            axisLine: {
              //y轴线
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#999",
              },
            },
          },
        ],
        grid: {
          left: 80,
        },
        series: [
          {
            type: "bar",
            barWidth: 10,
            data: ydata,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(235, 238, 245, 1)",
            },
            // 设置折线图颜色
            itemStyle: {
              normal: {
                color: (data) => {
                  let itemColor = "#9580FF";
                  if (this.lineIndex !== "") {
                    // 根据点击事件产生的index来判断，设置背景色
                    if (this.lineIndex == data.dataIndex) {
                      itemColor = "#9807ff";
                    }
                  }
                  return itemColor;
                },
                width: 2 + "px",
                barBorderRadius: [10, 10, 5, 5],
              },
            },
          },
        ],
      };
      this.lineEchart_popup.setOption(option);
      this.lineEchart_popup.on("click", (param) => {
        const pointInPixel = [param.event.offsetX, param.event.offsetY];
        if (this.lineEchart_popup.containPixel("grid", pointInPixel)) {
          let xIndex = this.lineEchart_popup.convertFromPixel(
            {
              seriesIndex: 0,
            },
            [param.event.offsetX, param.event.offsetY]
          )[0];
          this.lineIndex = param.dataIndex;
        }
        this.lineEchart_popup.setOption(option); //柱形图重构
      });
      window.onresize = (res) => {
        if (this.linePopUp) {
          this.lineEchart_popup.resize();
        }
      };
    },
    //*** 入线方式大数据 ***//

    //*** 年龄大数据 ***//
    ageAxios (orgCode, orgType) {
      let beginTime = "";
      let endTime = "";
      if (this.agoForm.time) {
        beginTime = this.agoForm.time[0];
        endTime = this.agoForm.time[1];
      }

      this.axios
        .post(
          "/order/v2/home/user/portrait/age",
          {
            request: {
              statisticType:
                this.agoForm.salasType == "" ? "1" : this.agoForm.salasType,
              orgCode: orgCode,
              orgType: orgType,
              endTime: endTime,
              startTime: beginTime,
            },
            version: "",
          },
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.agesEchartsSvg(res.data); //年龄条形图;
          }
        });
    },

    agoEvent () {
      this.agoPopUp = true;
      this.agoForm = {
        colony: sessionStorage.getItem("orgCode"),
        salasType: "1",
        time: this.getTimeAlready(),
      };
      this.$nextTick(() => {
        this.ageAxios(); //点击请求的数据
      });
    },
    //年龄大图
    agesEchartsSvg (param) {
      var xdata = [];
      var ydata = [];
      param.forEach((item) => {
        xdata.push(item.label);
        ydata.push({
          value: item.value,
          name: item.label,
        });
      });
      this.agoEchart_popup = this.$echarts.init(
        document.getElementById("agoEchart_popup")
      );
      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 20,
          top: 60,
          bottom: 0,
          data: xdata,
          textStyle: {
            color: "#999999",
            fontSize: 9,
          },
          itemWidth: 8,
          itemHeight: 8,
          icon: "circle",
        },
        color: [
          "#6699FF",
          "#A1E6CE",
          "#52CCA3",
          "#B3CDFF",
          "#B3CDFF",
          "#7D8FB3",
          "#ff9166",
        ],
        series: [
          {
            name: "年龄统计",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            center: ["45%", "40%"],
            data: ydata,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.agoEchart_popup.setOption(option);

      window.onresize = (res) => {
        if (this.agoEchart_popup) {
          this.agoEchart_popup.resize();
        }
      };
    },
    //*** 年龄大数据 ***//
  },
};
</script>

<style scoped lang="scss">
.hello {
  min-width: 1250px;
}

.teamechart {
  width: 100%;
}

.grid {
  padding: 18px 10px;
  background: rgba(255, 255, 255, 1);
  min-width: 200px;
  border-radius: 5px;

  p {
    text-align: center;
    margin: 20px auto;
    padding: 8px 0;
    background: #2d7edf;
    border-radius: 26px;

    img {
      width: 22px;
      height: 22px;
      display: inline-block;
      vertical-align: middle;
    }

    span {
      font-size: 15px;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
  }
}

.dataDisplay {
  background: #fff;
  width: 86%;
  margin-left: 10px;
  border-radius: 5px;
  // overflow: hidden;
}

.header {
  height: 30px;
  // line-height: 30px;
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
  // min-width: 1000px;
  background-color: #fff;

  .el-button {
    margin-left: 10px;
  }

  > p:first-child {
    font-size: 16px;
    font-weight: bold;
    border-left: 3px solid #2d7ddf;
    padding-left: 10px;
    height: 14px;
    line-height: 14px;
  }

  .timer {
    font-weight: normal;
    display: inline-block;
    margin-left: 15px;
    color: #999999;
    font-size: 14px;
  }

  .el-input__inner {
    width: 260px;
    height: 30px;
    line-height: 30px !important;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
}

.titleTotal {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.dataTeamplete {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  > div:nth-child(1) {
    margin-right: 10px;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    // border:1px solid #000;
  }

  .group {
    background: #fff;
    width: 100%;
    padding: 10px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    .tips {
      position: absolute;
      top: 35px;
      left: 18px;
      z-index: 10;
      font-size: 14px;

      p {
        span {
          font-size: 40px;
        }
      }
    }

    .ol {
      width: 85%;
      margin: 0 auto;

      li {
        display: flex;
        justify-content: space-between;

        p {
          font-size: 12px;

          span {
            font-size: 14px;
            display: inline-block;
            margin-right: 10px;
          }
        }

        span:last-child {
          font-size: 14px;
          color: #333;
        }

        margin-top: 5px;
      }

      li:nth-child(1) {
        p > span {
          color: #ff3b3b;
          font-weight: 600;
        }
      }

      li:nth-child(2) {
        p > span {
          color: #f5a623;
          font-weight: 600;
        }
      }

      li:nth-child(3) {
        p > span {
          color: #3d7fff;
          font-weight: 600;
        }
      }
    }
  }
}
.echart1 {
  position: relative;
}
.checked {
  /deep/.el-radio-group {
    margin-right: 10px;
  }
  /deep/.el-radio {
    margin-right: 15px;
  }
}

.colDate {
  // min-width: 1000px;
  padding: 10px;
  height: 116px;
  display: flex;
  justify-content: space-around;
  vertical-align: middle;
  background-color: #fff;

  > .col {
    text-align: center;

    p {
      color: #333333;
      font-size: 15px;
      margin-bottom: 10px;
    }

    div {
      color: #333;
      font-weight: bold;
      font-size: 36px;
    }

    .contrast {
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 14px;
        color: #999;
        font-weight: normal;
      }

      img {
        width: 15px;
        height: 15px;
      }
    }
  }
}

/deep/ .el-icon-time {
  line-height: 23px !important;
}

/deep/ .el-date-editor .el-range__icon {
  line-height: 23px !important;
}

/deep/ .el-date-editor .el-range-separator {
  line-height: 25px !important;
}

/deep/ .el-date-editor .el-range__close-icon {
  line-height: 24rpx !important;
  padding-bottom: 10px;
}

.el-col_style {
  width: 50%;
}

.graphical {
  width: 100%;
  display: flex;
  justify-content: space-between;

  #mainEchart1 {
    margin: 0 auto;
    background: #fff;
  }

  #mainEchart2 {
    margin: 0 auto;
    background: #fff;
  }
}

.basicInfo {
  background: #fff;
  margin: 10px 0;
  overflow: hidden;
  border-radius: 5px;
}

.baseInformation {
  li {
    width: 24.65%;
  }

  .echartline {
    margin: 0 auto;
    width: 100%;
  }

  .group1 {
    background: #fff;
    width: 100%;
    padding: 10px;
  }
}

// 弹框样式
/deep/.el-dialog {
  min-width: 900px;
}

/deep/.el-dialog__body {
  padding: 10px 20px;
}

.dialog {
  position: relative;
  padding-bottom: 50px;

  .dialogNav {
    position: relative;
    top: -30px;
    right: 20px;
  }

  /deep/.el-input {
    height: 30px;
    line-height: 30px;
    width: 150px;
  }

  /deep/.el-input--suffix .el-input__inner {
    height: 30px;
    line-height: 30px;
  }

  /deep/.el-input__icon {
    line-height: 30px;
  }

  /deep/.vxe-table .vxe-body--column,
  .vxe-table .vxe-footer--column,
  .vxe-table .vxe-header--column {
    line-height: 10px;
  }

  /deep/.vxe-table {
    color: #999;
  }

  /deep/.vxe-header--column {
    color: #2d7ddf;
    background-color: #fff;
    padding: 10px 0;
  }

  .page {
    text-align: right;
    width: 100%;
    background: #f5f5f5;
    padding-right: 20px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 1000;

    span {
      font-size: 14px;
      color: #666;
      display: inline-block;
      margin-left: 10px;
    }

    .el-pagination {
      display: inline-block;
      vertical-align: middle;
    }
  }
}

.groupTitle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  p:first-child {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    padding-left: 10px;
    height: 15px;
    line-height: 15px;
    border-left: 3px solid #2d7ddf;
  }

  span {
    font-weight: normal;
    font-size: 12px;
    color: #666;
  }
  p:hover {
    cursor: pointer;
    span {
      color: #2d7edf;
    }
  }
}

.picker_select {
  display: inline-block;
  margin-right: 10px;

  /deep/.el-input--suffix .el-input__inner {
    height: 30px;
    line-height: 30px;
  }

  /deep/.el-input__icon {
    line-height: 30px;
  }
}

#china_map_box {
  margin: 0 auto;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

#china_map_box #china_map {
  height: 100%;
}

#china_map_box .china_map_logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
}

#china_map .tooltip_style {
  line-height: 1.7;
  overflow: hidden;
}

#china_map .tooltip_left {
  float: left;
}

#china_map .tooltip_right {
  float: right;
}

.echartlinesex {
  width: 100%;
  margin: 0 auto;
}

.mask {
  position: fixed;
  top: 0;
  right: 0;
  background-color: rgba($color: #000000, $alpha: 0.6);
  width: 100%;
  height: 100%;
  z-index: 1000;
}
.selectTree {
  width: 250px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;

  /deep/.el-cascader .el-input .el-input__inner {
    line-height: 30px;
    height: 30px;
    width: 250px;
  }
  /deep/.el-cascader .el-input {
    width: 250px;
  }
}
/deep/.vue-treeselect__single-value {
  font-size: 14px;
  line-height: 30px;
}
/deep/.vue-treeselect__menu-container {
  font-size: 15px;
}
/deep/.vue-treeselect__multi-value-item {
  height: 20px;
  line-height: 20px;
  padding: 0;
}
/deep/.vue-treeselect__input {
  height: 30px;
  line-height: 30px;
  width: 60px !important;
  outline: none;
  border: none;
}
/deep/.vue-treeselect__placeholder {
  font-size: 10px;
  line-height: 28px;
}
/deep/.vue-treeselect--has-value .vue-treeselect__multi-value {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/deep/.vue-treeselect__control {
  height: 30px;
}

/deep/.el-dialog__header {
  padding: 13px 20px 10px;
}
/deep/.dialog .vxe-table .vxe-body--column {
  line-height: 20px;
}

/deep/.el-pagination__jump .el-input__inner {
  width: 60px;
}

/deep/.page {
  background: #fff !important;
  .el-input {
    width: 90px !important;
  }
}
</style>
